<template>
  <div class="douyin">
    <van-nav-bar
      fixed
      safe-area-inset-top
      title="挂机涨粉"
      left-text="返回"
      left-arrow
      @click-left="$router.push({ name: 'index' })"
    />
    <div class="douyin-config">
      <div class="douyin-config-item runtime">
        <van-field
          class="runtime-input"
          label="运行时间"
          label-width="4em"
          type="number"
          v-model="douyinConfig.duration"
        >
          <template #extra>
            <span style="margin-left: 10px">分钟</span>
          </template>
        </van-field>
      </div>
      <div class="other-config-item" style="padding: 5px">
        <span class="other-config-item__tit" style="margin-left: 0"
          >作品观看时长</span
        >
        <van-field
          type="number"
          center
          v-model="douyinConfig.browsingStartTime"
        />
        <span class="other-config-item__gap">-</span>
        <van-field type="number" v-model="douyinConfig.browsingEndTime" />
        <span>秒</span>
      </div>
      <div class="douyin-config-item keyword">
        <van-field
          rows="1"
          autosize
          type="textarea"
          label-width="100%"
          class="keyword-input"
          v-model="douyinConfig.keyWord"
          placeholder="输入关键词(多个关键词用英文','隔开)"
        >
          <template #label>
            <van-checkbox v-model="douyinConfig.keyWordSwitch" shape="square"
              >识别关键词(提高精准度)</van-checkbox
            >
          </template>
        </van-field>
      </div>
    </div>
    <div style="margin: 16px">
      <van-button round block type="info" @click="runAction"
        >运行脚本</van-button
      >
    </div>
    <div class="douyin-config other-config">
      <van-row>
        <van-col span="12">
          <div class="other-config-item">
            <van-checkbox
              v-model="douyinConfig.followSwitch"
              shape="square"
            ></van-checkbox>
            <span class="other-config-item__tit">关注作者</span>
            <van-field type="number" v-model="douyinConfig.followProb">
              <template #extra>
                <span>%</span>
              </template>
            </van-field>
          </div>
        </van-col>
        <van-col span="12">
          <div class="other-config-item">
            <van-checkbox
              v-model="douyinConfig.followCountLimitSwitch"
              shape="square"
            ></van-checkbox>
            <span class="other-config-item__tit">关注上限</span>
            <van-field type="number" v-model="douyinConfig.followCountLimit">
              <template #extra>
                <span>个</span>
              </template>
            </van-field>
          </div>
        </van-col>

        <van-col span="12">
          <div class="other-config-item">
            <van-checkbox
              v-model="douyinConfig.giveLikeSwitch"
              shape="square"
            ></van-checkbox>
            <span class="other-config-item__tit">点赞视频</span>
            <van-field type="number" v-model="douyinConfig.giveLikeProb">
              <template #extra>
                <span>%</span>
              </template>
            </van-field>
          </div>
        </van-col>
        <van-col span="12">
          <div class="other-config-item">
            <van-checkbox
              v-model="douyinConfig.giveLikeCountLimitSwitch"
              shape="square"
            ></van-checkbox>
            <span class="other-config-item__tit">点赞上限</span>
            <van-field type="number" v-model="douyinConfig.giveLikeCountLimit">
              <template #extra>
                <span>个</span>
              </template>
            </van-field>
          </div>
        </van-col>

        <van-col span="12">
          <div class="other-config-item">
            <van-checkbox
              v-model="douyinConfig.homepageSwitch"
              shape="square"
            ></van-checkbox>
            <span class="other-config-item__tit">浏览主页</span>
            <van-field type="number" v-model="douyinConfig.homepageProb">
              <template #extra>
                <span>%</span>
              </template>
            </van-field>
          </div>
        </van-col>

        <van-col span="12">
          <div class="other-config-item">
            <van-checkbox
              v-model="douyinConfig.collectSwitch"
              shape="square"
            ></van-checkbox>
            <span class="other-config-item__tit">收藏视频</span>
            <van-field type="number" v-model="douyinConfig.collectProb">
              <template #extra>
                <span>%</span>
              </template>
            </van-field>
          </div>
        </van-col>

        <van-col span="12">
          <div class="other-config-item">
            <van-checkbox
              v-model="douyinConfig.relaySwitch"
              shape="square"
            ></van-checkbox>
            <span class="other-config-item__tit">转发视频</span>
            <van-field type="number" v-model="douyinConfig.relayProb">
              <template #extra>
                <span>%</span>
              </template>
            </van-field>
          </div>
        </van-col>

        <van-col span="24">
          <div class="other-config-item like-limt">
            <div class="other-config-item__tit">
              <van-checkbox
                v-model="douyinConfig.giveLikeLimitSwitch"
                shape="square"
                >点赞限制(满足以下要求则点赞)</van-checkbox
              >
            </div>
            <div class="other-config-flat">
              <div class="other-config-flat__item">
                <span>点赞量小于</span>
                <van-field type="number" v-model="douyinConfig.giveLikeLess">
                  <template #extra>
                    <span>个</span>
                  </template>
                </van-field>
              </div>
              <div class="other-config-flat__item">
                <span>评论量小于</span>
                <van-field
                  type="number"
                  v-model="douyinConfig.giveLikeCommentLess"
                >
                  <template #extra>
                    <span>个</span>
                  </template>
                </van-field>
              </div>
            </div>
          </div>
        </van-col>

        <van-col span="24">
          <div class="other-config-item like-limt">
            <div class="other-config-item__tit">
              <van-checkbox
                v-model="douyinConfig.commentGiveLikeSwitch"
                shape="square"
                >评论点赞</van-checkbox
              >
            </div>
            <div class="other-config-flat">
              <div class="other-config-flat__item">
                <span>点赞概率</span>
                <van-field
                  type="number"
                  v-model="douyinConfig.commentGiveLikeProb"
                >
                  <template #extra>
                    <span>%</span>
                  </template>
                </van-field>
              </div>
              <div class="other-config-flat__item">
                <span>点赞量大于</span>
                <van-field
                  type="number"
                  v-model="douyinConfig.commentGiveLikeMoreThen"
                >
                  <template #extra>
                    <span>个</span>
                  </template>
                </van-field>
              </div>
            </div>
          </div>
        </van-col>

        <van-col span="24">
          <div class="other-config-item">
            <van-checkbox
              v-model="douyinConfig.commentSwitch"
              shape="square"
            ></van-checkbox>
            <span class="other-config-item__tit">评论视频</span>
            <van-field type="number" v-model="douyinConfig.commentProb">
              <template #extra>
                <span>%</span>
              </template>
            </van-field>
          </div>

          <div
            class="other-config-item comment-type"
            v-if="douyinConfig.commentSwitch"
          >
            <span class="other-config-item__tit comment-type-tit"
              >评论方式</span
            >
            <van-radio-group
              v-model="douyinConfig.commentType"
              direction="horizontal"
            >
              <van-radio :name="1">自动仿评论</van-radio>
              <van-radio :name="2">自定义评论</van-radio>
            </van-radio-group>
          </div>

          <div
            class="other-config-item comment-detail"
            v-if="douyinConfig.commentType === 2 && douyinConfig.commentSwitch"
          >
            <span class="other-config-item__tit comment-detail-tit"
              >评论内容(多个评论用'|'隔开)</span
            >
            <div class="comment-detail-content">
              <van-field
                rows="1"
                autosize
                type="textarea"
                label-width="100%"
                placeholder="输入评论内容(多个评论用'|'隔开)"
                v-model="douyinConfig.commentText"
              />
            </div>
          </div>
        </van-col>
      </van-row>
    </div>
  </div>
</template>

<script>
import Vue from "vue";

import {
  NavBar,
  Form,
  Field,
  Slider,
  Button,
  Radio,
  RadioGroup,
  CheckboxGroup,
  Checkbox,
  Row,
  Col,
} from "vant";
Vue.use(Form);
Vue.use(Field);
Vue.use(Slider);
Vue.use(Button);
Vue.use(NavBar);
Vue.use(Radio);
Vue.use(RadioGroup);
Vue.use(CheckboxGroup);
Vue.use(Checkbox);
Vue.use(Row);
Vue.use(Col);

export default {
  name: "Guajizhangfen",
  data() {
    return {
      douyinConfig: {
        // 基础配置
        duration: 5,
        browsingStartTime: 10,
        browsingEndTime: 15,
        keyWordSwitch: true,
        keyWord: '抖音,小助手,美女',
        // 关注
        followSwitch: true,
        followProb: 50,
        followCountLimitSwitch: true,
        followCountLimit: 10,
        // 点赞
        giveLikeSwitch: true,
        giveLikeProb: 50,
        giveLikeCountLimitSwitch: true,
        giveLikeCountLimit: 10,
        // 点赞限制
        giveLikeLimitSwitch: false,
        giveLikeLess: 10,
        giveLikeCommentLess: 10,
        // 浏览主页
        homepageSwitch: true,
        homepageProb: 10,
        // 收藏
        collectSwitch: true,
        collectProb: 10,
        // 转发
        relaySwitch: true,
        relayProb: 5,
        // 作品评论内容点赞
        commentGiveLikeSwitch: false,
        commentGiveLikeMoreThen: 0,
        commentGiveLikeProb: 0,
        // 评论作品
        commentSwitch: true,
        commentProb: 50,
        commentType: 1,
        commentText: '',
      },
    };
  },
  methods: {
    async runAction() {
      const checkResult = this.$store.dispatch('initCheck');
      if (!checkResult) {
        return;
      }
      await AutoWeb.autoPromise("openDouyin", this.douyinConfig);
    },
  },
};
</script>

<style lang="scss" scoped>
.douyin {
  padding: 50px 0;
  &-config {
    margin: 10px;
    padding: 5px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 12px #ebedf0;
    .runtime {
      &-input {
        display: flex;
        padding: 5px;
        /deep/ .van-field__value {
          flex: 1 1 4em;
          flex-grow: 0;
          flex-shrink: 0;
          input {
            border-bottom: #d3d3d3 solid 1px;
            text-align: center;
          }
        }
      }
    }
    .keyword {
      &-input {
        padding: 5px;
        flex-direction: column;
        /deep/ textarea {
          margin-top: 10px;
          border-bottom: #d3d3d3 solid 1px;
        }
      }
    }
  }
  .other-config {
    /deep/ .van-col {
      margin-bottom: 5px;
    }
    padding: 15px;
    &-item {
      display: flex;
      /deep/ .van-checkbox {
        flex: auto;
        flex-grow: 0;
        flex-shrink: 0;
      }
      /deep/ .van-field {
        padding: 0;
        flex: 1 1 4em;
        flex-grow: 0;
        flex-shrink: 0;
        textarea,
        input {
          border-bottom: #d3d3d3 solid 1px;
        }
        input {
          margin: 0px 5px;
          text-align: center;
        }
      }
      span {
        font-size: 14px;
        color: #646566;
        line-height: 2em;
        word-wrap: break-word;
      }
      &__tit {
        margin-left: 0.5em;
        text-align: left;
        flex: auto;
        flex-grow: 0;
        flex-shrink: 0;
      }
      &__gap {
        flex: 1 1 1em;
        flex-grow: 0;
        flex-shrink: 0;
        text-align: center;
      }
    }
    .like-limt {
      flex-direction: column;
      .other-config {
        &-item {
          &__tit {
            margin: 0;
            /deep/ .van-checkbox__label {
              font-size: 14px;
              color: #646566;
              line-height: 2em;
              word-wrap: break-word;
            }
          }
        }
        &-flat {
          display: flex;
          margin-left: 1.7em;
          &__item {
            display: flex;
          }
        }
      }
    }
    .comment-type {
      margin-left: 1.7em;
      &-tit {
        margin: 0 10px 0 0;
      }
      /deep/ .van-radio__label {
        font-size: 12px;
      }
    }
    .comment-detail {
      margin-left: 1.7em;
      flex-direction: column;
      &-tit {
        margin: 0;
      }
    }
  }
}
</style>